<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <script src="../static/js/jquery-3.7.1.min.js"></script>
    <script src="../static/js/jquery.cookie.min.js"></script>
    <script src="../static/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css">
</head>
<body style="background: #F1F3F5;">
<div class="container-fluid d-flex align-items-center vh-100">
    <div id="banner" class="carousel slide w-50" data-bs-ride="carousel">
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#TODO" data-bs-slide-to="0" class="active"></button>
            <button type="button" data-bs-target="#TODO" data-bs-slide-to="1"></button>
            <button type="button" data-bs-target="#TODO" data-bs-slide-to="2"></button>
            <button type="button" data-bs-target="#TODO" data-bs-slide-to="3"></button>
        </div>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="../static/img/1.avif" class="d-block" alt="banner-1" width="800">
            </div>
            <div class="carousel-item">
                <img src="../static/img/2.avif" class="d-block" alt="banner-2" height="800">
            </div>
            <div class="carousel-item">
                <img src="../static/img/3.avif" class="d-block" alt="banner-3" height="800">
            </div>
            <div class="carousel-item">
                <img src="../static/img/4.avif" class="d-block" alt="banner-4" height="800">
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#banner" data-bs-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#banner" data-bs-slide="next">
            <span class="carousel-control-next-icon"></span>
        </button>
    </div>
    <div class="justify-content-center align-items-center d-flex flex-column w-50">
        <h1 class="text-center mb-5">Login to Music Online</h1>
        <form id="login">
            <div class="form-floating">
                <input id="account" class="form-control" placeholder=" " name="account" required type="text">
                <label for="account" class="form-label">Enter your account</label>
            </div>

            <div class="form-floating mt-2">
                <input id="password" class="form-control" placeholder=" " name="password" required type="password">
                <label for="password" class="form-label">Enter your password</label>
            </div>

                <button id="submit" type="button" class="btn btn-primary text-center mt-3">Login</button>
                <button type="button" class="btn btn-primary text-center mt-3 ms-1"
                        onclick="location.href='./register.html'">Register
                </button><br>
                <button type="button" class="btn btn-primary text-center mt-3"
                        onclick="location.href='./index.html'">Back to Main Page</button>
        </form>
    </div>
</div>

<script>
    let server = "http://localhost:8010";

    $('#submit').click(function () {
        console.log("login clicked");
        $.ajax({
            type: "POST",
            dataType: "json",
            url: server + "/user/login",
            data: $("#login").serialize(),
            success: function (result) {
                if (result.code === 200) {
                    location.href = "./index.html"
                    $.cookie('token', result.data, {expires: 7});
                } else {
                    console.log(result.message);
                    alert(result.message);
                }
            },
            error: function () {
                console.log("login failed");
                alert("Login Failed");
            }
        })
    });
</script>
</body>
</html>